<template>
  <!-- 行业弹窗组件 -->
    <div class="form-container" :style="{ backgroundImage: 'url(' + $serverImgUrl + 'popup3.png' + ')' }">
      <img
        :src="$serverImgUrl + 'popup4.png'"
        alt="企业建筑"
        class="building-image"
      />
      <!-- 顶部标题和图片 -->
      <div class="header-section">
        <h1 class="form-title">企业核心业务，邀您来揭晓~</h1>
        <button class="close-button" @click="handleClose">×</button>
      </div>

      <!-- 表单内容 -->
      <div class="form-content">
        <!-- 企业名称输入 -->
        <div class="form-item">
          <label class="form-label">您的企业名称</label>
          <input
            type="text"
            class="form-input"
            placeholder="请输入"
            v-model="companyName"
          />
        </div>

        <!-- 企业业务输入 -->
        <div class="form-item">
          <label class="form-label">您的企业是做什么的?</label>
          <input
            type="text"
            class="form-input"
            placeholder="请输入"
            v-model="companyBusiness"
          />
        </div>

        <!-- 推荐选项 -->
        <div class="recommendation-section">
          <el-row>
            <el-col :span="3"
              ><div>
                <span class="recommendation-label">推荐：</span>
              </div></el-col
            >
            <el-col :span="21"
              ><div class="tag-container">
                <span
                  v-for="(tag, index) in recommendationTags"
                  :key="index"
                  class="recommendation-tag"
                  @click="selectTag(index)"
                  :class="{ active: selectedTagIndex === index }"
                >
                  {{ tag }}
                </span>
              </div></el-col
            >
          </el-row>
        </div>

        <!-- 提交按钮 -->
         <div style="text-align: center;">
          <el-button
          style="width: 120px;"
          class="custom-btn none-radius"
          @click="handleSubmit"
          >提交</el-button
        >
         </div>
        
      </div>
    </div>
</template>

<script>
export default {
  name: "MaskOverlayIndustry",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      showOverlay: this.show,
      companyName: "",
      companyBusiness: "",
      selectedTagIndex: -1,
      recommendationTags: [
        "实体零售",
        "生活服务",
        "教育培训",
        "美业服务",
        "休闲娱乐",
        "商务服务",
      ],
    };
  },
  watch: {
    show(newVal) {
      this.showOverlay = newVal;
    },
  },
  methods: {
    handleClose() {
      // 可以通过事件或回调通知父组件关闭遮罩层
      this.$emit("close",'industry');
    },
    selectTag(index) {
      this.selectedTagIndex = index;
      this.companyBusiness = this.recommendationTags[index];
    },
    handleSubmit() {
      // 提交表单逻辑

      // 这里可以添加表单提交的逻辑
      console.log("提交的企业信息:", {
        name: this.companyName,
        business: this.companyBusiness,
      });

      // 提交后可以清空表单
      this.companyName = "";
      this.companyBusiness = "";
      this.selectedTagIndex = -1;

      // 通知父组件提交成功并关闭
      this.$emit("submit", { success: true });
      this.handleClose();
    },
  },
};
</script>

<style scoped lang="scss">
.form-container {
  // background-image: url("https://lingxin1314.oss-cn-beijing.aliyuncs.com/weixiaozhu/popup3.png");
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 37px;
  // height: 500px;
  // width: 580px;
  max-width: 600px;
  box-sizing: border-box;
  position: relative;
}

.header-section {
  padding: 25px 30px 0;
  position: relative;
  display: flex;
}

.form-title {
  font-family: Source Han Sans;
  font-size: 28px;
  font-weight: bold;
  letter-spacing: 0em;
  font-variation-settings: "opsz" auto;
  font-feature-settings: "kern" on;
  color: #0e3c75;
  font-weight: 600;
  margin: 0;
  flex: 1;
}

.building-image {
  position: absolute;
  right: 30px;
  top: -35px;
  max-height: 154px;
  // transform: translateY(-50%);
}

.close-button {
  position: absolute;
  right: 15px;
  top: 15px;
  background: none;
  border: none;
  color: #0e3c75;
  font-size: 30px;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
  z-index: 10;
}

.close-button:hover {
  background-color: rgba(255, 255, 255, 0.2);
}

.form-content {
  border-radius: 20px;
  opacity: 1;
  background: rgba(255, 255, 255, 0.3);
  box-sizing: border-box;
  border-image: linear-gradient(216deg, #e5efff 26%, #ffffff 100%) 1;
  backdrop-filter: blur(15px);
  margin: 10px 20px 20px;
  padding: 40px 35px 30px  35px;
  box-sizing: border-box;
}

.form-item {
  margin-bottom: 10px;
}

.form-label {
  display: block;
  color: #333;
  font-size: 15px;
  font-weight: 500;
  margin-bottom: 8px;
}

.form-input {
  width: 100%;
  padding: 8px 15px;
  border: 2px solid #e1e5e9;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.form-input:focus {
  outline: none;
  border-color: var(--primary-color);
}

.recommendation-section {
  margin-bottom: 30px;
  display: flex;
}

.recommendation-label {
  flex: 2;
  display: block;
  color: #666;
  font-size: 14px;
  margin-top: 6px;
}

.tag-container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: -10px;
}

.recommendation-tag {
  padding: 6px 15px;
  border-radius: 21px;
  opacity: 1;
  background: #d7e8ff;
  font-size: 13px;
  color: #26426c;
  cursor: pointer;
  transition: all 0.2s;
  user-select: none;
}

.recommendation-tag:hover {
  background-color: var(--primary-color);
  color: #fff;
}

.recommendation-tag.active {
  background-color: var(--primary-color);
  color: white;
}

.submit-button {
  width: 100%;
  padding: 14px;
  background-color: #348cf8;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-button:hover {
  background-color: #2a76e6;
}

/* 响应式设计 */
@media (max-width: 576px) {
  .form-container {
    width: 95%;
    margin: 20px;
  }

  .header-section {
    padding: 20px 25px 15px;
  }

  .form-title {
    font-size: 16px;
  }

  .building-image {
    width: 60px;
    right: 20px;
  }

  .form-content {
    padding: 20px;
  }
}
</style>
